/**
* 功能描述: 树穿梭框demo
* @author 崔孝楠
* @date 2022/10/5 9:50
* @version 1.0
*/
<template>
  <div class="yw-transfer">
    <!-- source框 -->
    <div class="yw-transfer-list">
      <div class="yw-transfer-list-header">
        <!-- 选项数量 -->
        <span>6 项</span>
        <!-- title名 -->
        <span class="yw-transfer-list-header-title">Source</span>
      </div>
      <!-- 选项内容 -->
      <div class="yw-transfer-tree-content">
        <div class="yw-base-tree-layout yw-base-tree-style">
          <ul>
            <li class="yw-base-tree-expand-layout yw-base-tree-expand-style">
              <span class="yw-base-tree-expand-icon-layout yw-base-tree-expand-icon-style">+</span>
              <!-- 复选框 -->
              <label class="yw-checkbox-wrapper">
                <span class="yw-checkbox">
                  <input type="checkbox" class="yw-checkbox-input">
                  <span class="yw-checkbox-inner"></span>
                </span>
              </label>
              <span>0-0</span>
              <ul>
                <li class="yw-base-tree-expand-layout yw-base-tree-expand-style">
                  <span class="yw-base-tree-expand-icon-layout yw-base-tree-expand-icon-style">+</span>
                  <!-- 复选框 -->
                  <label class="yw-checkbox-wrapper">
                    <span class="yw-checkbox">
                      <input type="checkbox" class="yw-checkbox-input">
                      <span class="yw-checkbox-inner"></span>
                    </span>
                  </label>
                  <span>0-0</span>
                  <ul>
                    <li>
                      <!-- 复选框 -->
                      <label class="yw-checkbox-wrapper">
                        <span class="yw-checkbox">
                          <input type="checkbox" class="yw-checkbox-input">
                          <span class="yw-checkbox-inner"></span>
                        </span>
                      </label>
                      <span>0-0-0</span>
                    </li>
                    <li>
                      <!-- 复选框 -->
                      <label class="yw-checkbox-wrapper">
                        <span class="yw-checkbox">
                          <input type="checkbox" class="yw-checkbox-input">
                          <span class="yw-checkbox-inner"></span>
                        </span>
                      </label>
                      <span>0-0-1</span>
                    </li>
                  </ul>
                </li>
                <li class="yw-base-tree-expand-layout yw-base-tree-expand-style">
                  <span class="yw-base-tree-expand-icon-layout yw-base-tree-expand-icon-style">+</span>
                  <!-- 复选框 -->
                  <label class="yw-checkbox-wrapper">
                    <span class="yw-checkbox">
                      <input type="checkbox" class="yw-checkbox-input">
                      <span class="yw-checkbox-inner"></span>
                    </span>
                  </label>
                  <span>0-1</span>
                  <ul>
                    <li>
                      <!-- 复选框 -->
                      <label class="yw-checkbox-wrapper">
                        <span class="yw-checkbox">
                          <input type="checkbox" class="yw-checkbox-input">
                          <span class="yw-checkbox-inner"></span>
                        </span>
                      </label>
                      <span>0-1-0</span>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 穿梭按钮 -->
    <div class="yw-transfer-operation">
      <button class="yw-btn yw-btn-primary" disabled>
        <svg focusable="false" class="" data-icon="right" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
          <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path>
        </svg>
      </button>
      <button class="yw-btn yw-btn-primary" disabled>
        <svg focusable="false" class="" data-icon="left" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
          <path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path>
        </svg>
      </button>
    </div>

    <!-- target框 -->
    <div class="yw-transfer-list">
      <div class="yw-transfer-list-header">
        <!-- 选项数量 -->
        <span>1 项</span>
        <!-- title名 -->
        <span class="yw-transfer-list-header-title">Target</span>
      </div>
      <!-- 选项内容 -->
      <ul class="yw-transfer-list-content">
        <li class="yw-transfer-list-content-item">
          <!-- 选项前的复选框 -->
          <label class="yw-checkbox-wrapper">
            <span class="yw-checkbox">
              <input type="checkbox" class="yw-checkbox-input">
              <span class="yw-checkbox-inner"></span>
            </span>
          </label>
          <!-- 选项文本 -->
          <span class="yw-transfer-list-content-item-text">0-1-1</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import YwBaseTree from "../Tree/index.vue";
export default {
  name: "index",
  components: {
    YwBaseTree
  }
}
</script>

<style scoped>

</style>
